<template>
  <div>
    <div id="top-status-about">
      <span class="time" style="float: left">{{time}}</span>
      <img src="@/assets/电 90%.png"
           style="float: right; width: 30px; height: 30px; margin-top: -6px; margin-right: 15px;">
      <img src="@/assets/280-手机网络.png"
           style="float: right; width: 19px; height: 19px; margin-top: -1px; margin-right: 6px;">
      <img src="@/assets/手机信号.png"
           style="float: right; width: 15px; height: 15px; margin-top: 1px; margin-right: 13px;">
    </div>
    <div id="bottom">
      <div style="width: 100%; height: 300px; background-color: #FFFFFF; margin-top: 50px;">
        <img src="../../../assets/向左箭头(白).png" style="width: 25px; height: 25px; float: left;margin: 6px 0 0 15px" @click="gopersonalUser">
        <p style="float: left; margin: 7px 0 0 140px;font-weight: bolder;font-size : 13pt;">关于</p>
        <img src="@/assets/圆叉(白).png"
            style="width: 120px;height: 120px;float: left;margin: 50px 0px 0px -80px">
        <p style="float: left; margin: 12px 0 0 170px;font-size : 14pt;">LOGO</p>
        <p STYLE="float: left; margin: 12px 0 0 170px; font-size: 12pt; color:#A7AFB2">V 1.0.1</p>
      </div>
      <div style="width: 100%; height: 60px; background-color: #FFFFFF;margin-top: 12px" @click="goprivacyAgreement" >
        <p style="float: left;margin: 16px 0 0 18px;font-weight: bolder;font-size : 15pt;">隐私协议</p>
        <img src="@/assets/向右箭头.png"
             style="width: 25px; height: 25px;float: right;margin: 15px 17px 0 0">
      </div>
      <div style="width: 100%; height: 60px; background-color: #FFFFFF;margin-top: 5px" @click="golicenseInformation">
        <p style="float: left;margin: 16px 0 0 18px;font-weight: bolder;font-size : 15pt;">证照信息</p>
        <img src="@/assets/向右箭头.png"
             style="width: 25px; height: 25px;float: right;margin: 15px 17px 0 0">
      </div>
    </div>

    <Tabbar/>
  </div>
</template>

<script>
import Tabbar from "@/components/Tabbar.vue"
import Vue from 'vue';
import {Tab, Tabs} from 'vant';

Vue.use(Tab);
Vue.use(Tabs);
export default {
  components: {
    Tabbar,
  },
  data() {
    return {
      time: ''
    };
  },
  methods: {
    format(percentage) {
      return percentage === 100 ? ' ' : ` `;
    },
    updateTime() {
      setInterval(() => {
        const now = new Date();
        const timeString = now.toLocaleTimeString();
        this.time = timeString;
      }, 1000);
    },
    // 模拟信号、网络、电量状态数据
    setSignalStatus() {
      const signalStatus = 'full';  // 例如 'full','medium', 'low'

      // 根据状态设置相应的图标样式或显示不同的图标
      if (signalStatus === 'full') {
        // 设置信号满格的样式
      } else if (signalStatus ==='medium') {
        // 设置信号中等的样式
      } else {
        // 设置信号低的样式
      }
    },
    gopersonalUser(){
      this.$router.push("/personalUser")
    },
    goprivacyAgreement(){
      this.$router.push("/privacyAgreement")
    },
    golicenseInformation(){
      this.$router.push("/licenseInformation")
    }
  },
  created() {
    this.updateTime();
    this.setSignalStatus();
  }
};
</script>

<style>
#top-status-about {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #F8F8F8;
  padding: 10px;
  font-weight: bolder;
  color: #171010;
  padding-top: 15px;
  float: left;
}
#bottom{
  width: 100%;
  height: 798px;
  float: left;
  margin-top: 10px;
  background-color: #F8F8F8;
}
</style>